<template>
    <div class="fly1">
        <img src="../mine/img/WechatIMG100箭头.jpeg" alt="">
    <div class="fly2"><p>宠物类型</p></div>
</div>
<div class="fly3">
   <router-link to="dynamic">
    <div class="wwd">
       <img src="../mine/img/dogWechatIMG63734.png" alt="">
    </div>
</router-link>
    <div class="miao">
        <img src="../mine/img/WechatIMG81.jpeg" alt="">
        <h4>猫</h4>
    </div>
    <div class="tuzi">
        <img src="../mine/img/WechatIMG63866.jpeg" alt="">
        <h4>兔子</h4>
    </div>
    <div class="niao">
        <img src="../mine/img/WechatIMG83.jpeg" alt="">
        <h4>鸟</h4>
    </div>
    <div class="cangs">
        <img src="../mine/img/WechatIMG84.jpeg" alt="">
        <h4>仓鼠</h4>
    </div>
    <div class="other">
        <img src="../mine/img/WechatIMG85.jpeg" alt="">
        <h4>其他</h4>
    </div>
</div>

</template>

<script>
export default {
    name: "xuanze",
    
}

</script>

<style>
.fly3{
  width: 100%;
  height: 520px;
  top: 79px;
  position: relative;
}
.wwd {
    width: 126px;
    height: 159px;
    position: absolute;
    top: -9px;
    left: 50px;
}
.wwd img{
    width: 125px;
}
.miao {
    width: 126px;
    height: 159px;
    position: absolute;
    top: -9px;
    right: 50px;
}
.miao h4{
    position: absolute;
    left: 54px;
}
.tuzi{
    width: 126px;
    height: 159px;
    position: absolute;
    top: 160px;
    left:50px;
}
.tuzi h4{
    position: absolute;
    left: 44px;
}
.niao{
    width: 126px;
    height: 159px;
    position: absolute;
    top: 160px;
    right:50px;
}
.niao h4{
    position: absolute;
    left: 54px;
}
.cangs{
    width: 126px;
    height: 159px;
    position: absolute;
    top: 334px;
    left:50px;
}
.cangs h4{
    position: absolute;
    left: 49px;
}
.other{
    width: 126px;
    height: 159px;
    position: absolute;
    top: 334px;
    right:50px;
}
.other h4{
    position: absolute;
    left: 49px;
}

.miao img{
    width: 125px;
}
.tuzi img{
    width: 125px;
}
.niao img{
    width: 125px;
}
.cangs img{
    width: 125px;
}
.other img{
    width: 125px;
}
h4{
    font-size: 18px;
    font-weight: 300;
}


.fly2{
  width: 100%;
  height: 60px;
  top: 73px;
  position: relative;
}
.fly2 p{
  left: 20px;
  top: 15px;
  position: absolute;
  font-size: 19px;
  font-weight: 400;
}
.fly1{
  width: 100%;
  height: 70px;
  position: relative;
}
.fly1 img{
  width: 38px;
  height: 33px;
  position: absolute;
  left: 13px;
  top: 16px;
}
</style>